<template>
  <div>
    <h1>about</h1>
    <h3>{{ countNum }}</h3>
    <h3>{{ oddOrEven }}</h3>
    <h3>{{ info }}</h3>
    <button @click="addTest">触发add方法</button>
    <button @click="changeState">更改state当中的值</button>
    <button @click="resetData">恢复初始化数据</button>
    <h3>{{ name }}</h3>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { count } from "../store/count";
import { user } from "../store/user";
// console.log(count);
const countStore = count();
const userStore = user();
console.log(countStore);
// 一类 state getters通过storeToRefs解构出来就可以直接使用
// 一类 方法 actions
const { countNum, oddOrEven, info } = storeToRefs(countStore);

const { name } = storeToRefs(userStore);

// 方法
const addTest = () => {
  countStore.add(10);
};
// 出来通过actions当中的方法更改state 当中的值，可以直接更改state当中的值
// vuex不能直接更改state当中的值 mutations去改
const changeState = () => {
  countStore.$patch({
    countNum: 50,
    // state当中的属性值都可以写到这里进行直接更改
    info: "在告诉你个不幸的消息，我每周五晚7点开始考试，一周一次",
  });
};
const resetData = () => {
  // 恢复到初始的数据
  countStore.$reset();
};
</script>

<style lang="scss" scoped>
</style>